<template>
    <view class="wo-page" v-if="appInit && pageInit">
        <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="tabChangeFunc"></u-tabs>
        <view class="wo-page-body">
            <view class="wo-list u-padding-10" v-if="dataList.total">
                <view class="wo-item u-padding-10" v-for="(data_v, data_k) in dataList.items" :key="data_k">
                    <view class="wo-data u-padding-20">
                        <view class="wo-data-info">
                            <view class="wo-data-name">
                                <text>{{ data_v.name }}</text>
                            </view>
                            <view class="">
                                <text>地址：{{ data_v.address }}</text>
                            </view>
                        </view>
                        <view class="wo-data-action">
                            <u-button type="primary" size="mini" shape="circle" @click="$u.route('pages/unit/detail', {id: data_v.id})">查看详情</u-button>
                        </view>
                    </view>
                </view>
                <u-loadmore :status="dataListStatus" @loadmore="dataListMoreFunc"></u-loadmore>
            </view>
            <u-empty v-else text="暂无数据" mode="list"></u-empty>
        </view>
        <view class="u-flex wo-page-foot u-padding-20">
            <view class="u-flex-6 u-padding-right-10"><u-button type="primary" shape="circle" @click="$u.route('pages/index')">返回首页</u-button></view>
            <view class="u-flex-6"><u-button type="success" shape="circle" @click="$u.route('pages/unit/form')">添加信息</u-button></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabList: [{
            	name: '个人登记'
            }, {
            	name: '单位登记'
            }],
            tabIndex: 1,
            // 列表
            dataList: {},
            // 列表状态
            dataListStatus: 'loadmore'
        };
    },
    methods: {
        // 页面初始化
        async initPageFunc(option) {
            // 数据列表
            let dataList = await this.dataListFunc();
            if (dataList) {
                this.dataList = dataList;
            }
            this.pageInit = true;
        },
        async dataListFunc(params) {
            params = params || {};
            this.dataListStatus = 'loading';
            let dataList = await this.$u.api.planUnitList(params);
            if (!dataList) {
                return false;
            }
            this.dataListStatus = 'loadmore';
            return dataList;
        },
        async dataListMoreFunc() {
            if (this.dataList.items.length >= this.dataList.total) {
                this.dataListStatus = 'nomore';
                return false;
            }
            let result = await this.dataListFunc({
                page: ++this.dataList.page_current
            });
            if (result) {
                this.dataList.items = this.dataList.items.concat(result.items);
            }
        },
        async tabChangeFunc(index) {
        	this.tabIndex = index;
            if (index == 0) {
                this.$u.route('pages/person/index');
            }
        }
    }
};
</script>

<style lang="scss">
.wo-page-body {
    padding-bottom: uni-unit(70px);
}
.wo-page-foot {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
}
.wo-data {
    display: flex;
    background-color: #fff;
    border-radius: uni-unit(5px);
    .wo-data-info {
        flex: 1;
        line-height: uni-unit(20px);
        font-size: uni-unit(12px);
        color: $uni-text-color-grey;
        .wo-data-name {
            height: uni-unit(30px);
            line-height: uni-unit(30px);
            font-size: uni-unit(16px);
            color: $uni-text-color;
        }
    }
    .wo-data-action {
        display: flex;
        align-items: center;
    }
}
</style>
